<!-- components/Account.vue -->
<template>
	<view class="container">
		<!-- 标题 -->
		<view class="header " >
			<image src="/static/index_slices/back_left.png" mode="" @click="toBack"></image>
			<text>我的邀请</text>
		
		</view>
		<view class="content">
			<view class="invite">
				<image :src="poster" mode="widthFix"></image>
				<view class="btn" @click="savePoster">
					保存图片去邀请 
				</view>
				
			</view>
			<view class="operate flex-between">
				<view class="list " v-for="(item,index) in operateList" :key="index">
					<image :src="item.icon" mode="widthFix"></image>
					<view class="text">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {ref,reactive, computed, onMounted, onUnmounted} from 'vue'
	import CustomNavbar from '@/components/CustomNavbar.vue';
	// 保存海报
	const poster = ref('/otherPages/static/btn_bg.png')
	const savePoster = ()=>{
		uni.saveImageToPhotosAlbum({
		    filePath: poster.value, // 图片路径或URL
			success: function () {
			uni.showToast({ title: '保存成功' });
		    },
			fail: function (err) {
		          uni.showToast({ title: '保存失败', icon: 'none' });
		    }
		});
	}
	// 操作
	const operateList = reactive(
	[
		{icon:'/otherPages/static/share.png',text:'生成海报保存分享给好友'},
		{icon:'/otherPages/static/friend.png',text:'好友扫码  接受邀请'},
		{icon:'/otherPages/static/authentication.png',text:'好友登录  完成认证'},
	])
	
	// 返回上一页
	const toBack = ()=>{
		uni.navigateBack({
		  delta: 1 // 返回层数（默认1，表示返回上一页）
		});
	}

	
	
	
</script>

<style lang="scss" scoped>
	.container {
		
		// background: url(/static/index_slices/底.png) no-repeat;
		background-size: 100% auto;
		// padding-top: 28rpx;
		padding-bottom: 120rpx;
		background: radial-gradient(
		   circle at center, 
		   #FD9674 0%, 
		   #FE8261 100%
		 );
		 // 标题
		 .header{
		 		 position: fixed;
		 		 top: 0;
		 		 left: 0;
		 		 right: 0;
		 		 padding: 30rpx;
		 		 color: #fff;
		 		 z-index: 999;
		 		 text-align: left;
				 padding-left: 89rpx;
		 		 image{
		 		 			 position: absolute;
		 		 			 left: 30rpx;
		 		 			 top: 38rpx;
		 		 			 width: 20rpx;
		 		 			 height: 38rpx;
		 		 }
		  }
		/* 导航栏高度 */
		.content{
			.invite{
				position: relative;
				image{
					width: 100%;
				}
				.btn{
					width: 526rpx;
					height: 101rpx;
					line-height: 101rpx;
					background: url('/otherPages/static/btn1_bg.png') no-repeat;
					background-size: 100%;
					position: absolute;
					left: 112rpx;
					bottom: 135rpx;
					text-align: center;
					color: #4E301D;
					font-size: 34.7rpx;
				}
			}
			
			.operate{
				width: 690rpx;
				height: 446rpx;
				margin-left: 30rpx;
				background: url('/otherPages/static/operate_bg.png') no-repeat;
				background-size: 100%;
				padding:141rpx 47rpx 100rpx 47rpx;
				box-sizing: border-box;
				margin-top: 25rpx;
				.list{
					text-align: center;
					font-size: 28rpx;
					color: #333333;
					max-width: 169rpx;
					
					image{
						width: 106rpx;
						height: 106rpx;
						margin-bottom: 32rpx;
					}
				}
			}
		}
	}
</style>